import Vue from "vue";
import App from "./App.vue";
import router from "./router";

//引入组件库
import Vant from "vant";
//注册组件库
Vue.use(Vant);
//引入组件样式文件
import "vant/lib/index.css";
// 引入 请求库
import axios from "axios";
// 添加基准路径
//axios.defaults.baseURL = "http://liangwei.tech:3000";
axios.defaults.baseURL = "http://127.0.0.1:3000";
// 设置请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 每次发送请求之前判断本地是否存在token
    // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
    const token = localStorage.getItem("token");
    if (token && !config.headers.Authorization) {
      config.headers.Authorization = "Bearer " + token;
    }

    return config;
  },
  (error) => {
    return Promise.error(error);
  }
);

// 设置响应拦截器
// axios.interceptors.response.use()这个函数可以拦截所有请求的响应，并执行逻辑
// 我们需要将逻辑函数作为参数传入
import { Toast } from "vant";
axios.interceptors.response.use((res) => {
  console.log("发送了请求");

  // 对获取的数据进行处理
  const { statusCode, message } = res.data;
  console.log(statusCode);
  console.log(message);

  if (message === "用户信息校验失败") {
    // 处理错误，在入口文件如果想要使用 vant ui 弹出窗口、
    // 这里没有 this 也没有 $toast
    // 可以使用单独引入的方式，只使用 Toast
    Toast.fail("用户信息校验失败，重新登录");
    localStorage.removeItem("token");
    localStorage.removeItem("userId");
    router.replace("/login");
  }

  // res 是每次请求得到的结果，相当于.then 的 res 还没到达之前在这里被拦住了
  // 拦截器把结果拦住，卡死整个执行过程，执行完我们要的函数以后， 必须 return 出去放行
  // 相当于路由守卫 next
  return res;
});

// 绑定到原型
Vue.prototype.$axios = axios;

// 添加路由守卫
// 全局前设置路由守卫，会在所有路由发生变化之前进行拦截
// 调用 router 的 beforeEach 方法
//router.beforeEach()拦截所有跳转，跳转之前都会执行一个函数，我们要作为参数传进去
// to: Route: 即将要进入的目标 路由对象
// from: Route: 当前导航正要离开的路由
// next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
router.beforeEach((to, from, next) => {
  // console.log(to);
  // console.log(from);
  // 1.第一种写法
  // if (to.name === "PersonalIndex" || to.name === "Edit")
  // 2.第二中写法是
  if (to.meta.auth) {
    // 如果目的地是个人中心页才需要效验
    // 效验token
    const token = localStorage.getItem("token");
    if (token) {
      // 如果token存在 放行
      next();
    } else {
      // 跳转到登录页
      router.push("/login");
    }
  } else {
    next();
  }
});
Vue.config.productionTip = false;
new Vue({
  router,
  render: function(h) {
    return h(App);
  },
}).$mount("#app");
